<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">个人设置</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">个人设置</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <img id="user_profile_head" class="profile-user-img img-fluid img-circle"
                                alt="User profile picture">
                        </div>

                        <h3 id="user_profile_name" class="profile-username text-center"></h3>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->

            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                            <li class="nav-item"><a class="nav-link active" href="#settings" data-toggle="tab">设置</a>
                            </li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">

                            <div class="active tab-pane" id="settings">
                                <form id="user_profile_form" class="form-horizontal">
                                    <div class="form-group row">
                                        <label for="inputName" class="col-sm-2 col-form-label">姓名</label>
                                        <div class="col-sm-10">
                                            <input type="email" class="form-control" id="user_profile_inputName"
                                                placeholder="Name" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
                                        <div class="col-sm-10">
                                            <input type="email" name="userEmail" class="form-control"
                                                id="user_profile_inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputName2" class="col-sm-2 col-form-label">昵称</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="userNickname" class="form-control"
                                                id="user_profile_inputNickname" placeholder="Nickname">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="offset-sm-2 col-sm-10">
                                            <button id="user_profile_submit" type="button"
                                                class="btn btn-danger">保存修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<script>
    document.getElementById('user_profile_name').innerHTML = getUserNickname();
    document.getElementById('user_profile_head').src = getUserHeadPicture();
    document.getElementById('user_profile_inputName').value = getUserName();
    document.getElementById('user_profile_inputEmail').value = getUserEmail();
    document.getElementById('user_profile_inputNickname').value = getUserNickname();
    $("#user_profile_submit").click(function () {
        let obj = serializeJsonForm("user_profile_form");
        _requestPost(obj, getUrl() + "/user/updateUserBase", function (params) {
            setUser(params);
            location.href = './homePage.html?url=profile'
        });
    });
</script>